<template>
    <div id="tradeChart" style="width:100%;height:400px;"></div>

</template>

<script>
import echarts from 'echarts';
import { getTraderAnalysis } from '@/api/trainerAnalyze'

export default {
    data() {
        return {

        }
    },
    mounted() {
        let data = {
                uid: this.$route.query.uid,
                traderAccountId: this.$route.query.traderAccountId
            }
            getTraderAnalysis(data).then(res => {
                console.log(res)
                this.$nextTick(() => {
            let tradeChart = echarts.init(document.getElementById('tradeChart'));
            let option = {
                xAxis: {
                    type: 'category',
                    data: res.profitGraph.timeline
                },
                yAxis: {
                    type: 'value',
                    name: '利润'
                },
                dataZoom: [  // 滑动缩放
                    {
                        // startValue: '11:10:11'
                    },
                    {
                        type: "inside", // 拖动x轴缩放
                    },
                ],
                calculable: true,
                series: [
                    {
                        data: res.profitGraph.dataDay,
                        type: 'line',
                        color: 'rgb(155,89,188)',
                        areaStyle: {
                            normal: {
                                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

                                    offset: 0,
                                    color: 'rgba(155,89,188,1)'
                                }, {
                                    offset: .34,
                                    color: 'rgba(155,89,188,0.25)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(155,89,188,0.00)'
                                }])

                            },//区域颜色渐变
                        },
                        markLine: {
                            symbol: 'none',
                            label: {
                                // position:[10, 10],
                                color: '#000',
                                fontSize: 12,
                                formatter: "交易"
                            },
                            lineStyle: {
                                type: 'solid',
                                width: 1,
                                color: '#000'
                            },
                            data: [
                                { yAxis: -2000, name: '交易' },
                            ]
                        }
                    },

                ]
            };
            tradeChart.setOption(option);

            window.addEventListener('resize', function () {
                tradeChart.resize();
            })
        })
            }).catch(err => {
                console.log(err)
            })

        // this.$nextTick(() => {
        //     let tradeChart = echarts.init(document.getElementById('tradeChart'));
        //     let option = {
        //         xAxis: {
        //             type: 'category',
        //             data: ['2023-07-25', '2023-07-27', '2023-07-31', '2023-08-02', '2023-08-04', '2023-08-08', '2023-08-10', '2023-08-14', '2023-08-16', '2023-08-18', '2023-08-22']
        //         },
        //         yAxis: {
        //             type: 'value',
        //             name: '利润'
        //         },
        //         dataZoom: [  // 滑动缩放
        //             {
        //                 // startValue: '11:10:11'
        //             },
        //             {
        //                 type: "inside", // 拖动x轴缩放
        //             },
        //         ],
        //         calculable: true,
        //         series: [
        //             {
        //                 data: [0, 2320, 2241, 2182, 3000, -2000, -3500, -16600, -18800, -30000, -40000, -50000],
        //                 type: 'line',
        //                 color: 'rgb(155,89,188)',
        //                 areaStyle: {
        //                     normal: {
        //                         //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
        //                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

        //                             offset: 0,
        //                             color: 'rgba(155,89,188,1)'
        //                         }, {
        //                             offset: .34,
        //                             color: 'rgba(155,89,188,0.25)'
        //                         }, {
        //                             offset: 1,
        //                             color: 'rgba(155,89,188,0.00)'
        //                         }])

        //                     },//区域颜色渐变
        //                 },
        //                 markLine: {
        //                     symbol: 'none',
        //                     label: {
        //                         // position:[10, 10],
        //                         color: '#000',
        //                         fontSize: 12,
        //                         formatter: "交易"
        //                     },
        //                     lineStyle: {
        //                         type: 'solid',
        //                         width: 1,
        //                         color: '#000'
        //                     },
        //                     data: [
        //                         { yAxis: -2000, name: '交易' },
        //                     ]
        //                 }
        //             },

        //         ]
        //     };
        //     tradeChart.setOption(option);

        //     window.addEventListener('resize', function () {
        //         tradeChart.resize();
        //     })
        // })

    },
    methods: {
    }
}
</script>
<style lang="scss" scoped></style>